﻿<!DOCTYPE html>
<html>
<head>
	<title>CueMixr Control</title>
	<style type="text/css">
		.FormButtons a {
			display: inline-block;
			background-color: #33CC33;
			color: #FFFFFF;
			border: thin solid #000;
			padding: 25px;
			cursor: pointer;
			border-radius: 15px;
			margin-bottom: 20px;
			text-decoration: none;
		}

			.FormButtons a:hover {
				background-color: #FFCC00;
				color: #000;
			}

			.FormButtons a:active {
				background-color: #CC0000;
				color: #000;
			}

		.NavBar a {
			background-color: #33CC33;
			color: #FFFFFF;
			border: thin solid #000;
			padding: 15px;
			cursor: pointer;
			border-radius: 10px;
			margin: 10px;
			text-decoration: none;
			display: inline-block;
		}

			.NavBar a:hover {
				background-color: #FFCC00;
				color: #000;
			}

			.NavBar a:active {
				background-color: #CC0000;
				color: #000;
			}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>

</head>
<body style="background-color: Black; color: White; text-align: center; min-width: 350px;">
	<div style="font-size: 1.75em">Cue Mixr Control</div>
	<br />
	<div id="MainControls" class="FormButtons">
		<div style="font-size: 1.5em">Show Controls</div>
		<br />
		<br />

		<br />
		<a href="#" onclick="RunCommand('Go', 'Go')" style="height: 35%; width: 85%; max-width: 480px; font-size: 2.25em;">
			<div style="display: table; width: 100%; height: 100%;">
				<div style="display: table-cell; vertical-align: middle;">Go</div>
			</div>
		</a>
		<br />

        <hr style="width:50%;" />

		Bump cue status:&nbsp;<input type="number" min="1" max="999999999" id="CueNumber" step=".1" value="1" /><br /><br />
		<a href="#" onclick="RunCommand('BumpCueStatus', document.getElementById('CueNumber').value)" style="height: 15%; width: 85%; max-width: 480px; font-size: xx-large;">
			<div style="display: table; width: 100%; height: 100%;">
				<div style="display: table-cell; vertical-align: middle;">BumpCueStatus</div>
			</div>
		</a>
		<br />

        <a href="#" onclick="RunCommand('StopAllCues', 'StopAllCues')" style="height:35%; width:85%; max-width:480px; font-size:2.25em;">
            <div style="display:table; width:100%; height:100%;">
                <div style="display:table-cell; vertical-align:middle;">Stop All Cues</div>
            </div>
        </a>
        <br />

        <a href="#" onclick="RunCommand('ClearCues', 'ClearCues')" style="height:35%; width:85%; max-width:480px; font-size:2.25em;">
            <div style="display:table; width:100%; height:100%;">
                <div style="display:table-cell; vertical-align:middle;">Set All Cues to Standby</div>
            </div>
        </a>
        <br />
	</div>

	<script type="text/javascript">
		function RunCommand(command, value) {
			var form = document.createElement('form');
			form.setAttribute('method', 'POST');
			form.setAttribute('action', '');

			var hf = document.createElement('input');
			hf.setAttribute('type', 'hidden');
			hf.setAttribute('name', command);
			hf.setAttribute('value', value);
			form.appendChild(hf);

			document.body.appendChild(form);
			form.submit();
		};
	</script>
</body>
</html>
